<!--
 * @Author: ChunLai
 * @Date: 2023-07-25 14:55:43
 * @LastEditTime: 2025-09-04 17:37:10
 * @Description: 更换银行卡
 * @FilePath: \02.bldinsure\src\views\bankcard\replace.vue
-->
<template>
  <div class="replace_page">
    <div class="mode1" v-if="bankPhoto == '1'">
      <div class="flex-lr mode1_cell1">
        <div class="mode1_tt">拍摄银行卡正面照片</div>
        <div
          class="flex_ac mode1_desc"
          @click.stop="$refs.bankLimitTableRef.initCompnt()"
        >
          <MsImgIcon size="16" name="question" class="mr2" />
          银行限额表
        </div>
      </div>
      <div class="mode1_cell2 mt10">
        <div class="mode1_desc2 warning-mode">
          <span class="tip_icon">
            <MsImgIcon size="16" name="tip" />
          </span>
          <span class="flex_1">
            请仔细核对并确认银行卡号与上传的银行卡影像是否一致
          </span>
        </div>
      </div>
      <div class="infoBox content">
        <div class="just-spa">
          <div class="al-cen flex-column">
            <van-uploader
              :max-count="1"
              :deletable="false"
              :after-read="afterRead"
            >
              <div class="uploadCell">
                <div class="content-img-far">
                  <img
                    :src="bankUrl"
                    class="content-img"
                    v-if="bankUrl != ''"
                  />
                  <div class="bank_exw" v-else>
                    <img :src="`${imgUrlPath}/img/eg_bank.png`" />
                  </div>
                </div>
                <div class="tips">上传银行卡正面</div>
              </div>
            </van-uploader>
          </div>
        </div>
      </div>
    </div>
    <div class="mode2">
      <div class="li_cell" v-if="infoReg.hasOwnProperty('payMode')">
        <div class="cell_label">缴费方式</div>
        <div class="cell_value">
          <MsRadios
            :curVal="cardInfo.payMode"
            :arrList="payModeList"
            type="payMode"
            @change="changeMsRadio"
            v-if="!dontChangePayMode"
          />
          <span v-else>{{ payModeLabel }}</span>
        </div>
      </div>
      <div class="li_cell">
        <div class="cell_label">账户姓名</div>
        <div class="cell_value">{{ cardInfo.bankAccName }}</div>
      </div>
      <div class="li_cell" v-if="infoReg.hasOwnProperty('bankCode')">
        <div class="cell_label">缴费银行</div>
        <div class="cell_value">
          <van-field
            v-if="infoReg.hasOwnProperty('bankCode')"
            input-align="right"
            @click="showPopAction('radioPick', 'bankCode', bankList)"
            :value="cardInfo.bankName"
            readonly
            placeholder="请选择"
          >
            <span class="ms-row-icon" slot="right-icon"></span>
          </van-field>
        </div>
      </div>
      <div class="li_cell" v-if="infoReg.hasOwnProperty('bankAccNo')">
        <div class="cell_label">银行账号</div>
        <div class="cell_value">
          <van-field
            class="refACCNO"
            v-if="infoReg.hasOwnProperty('bankAccNo')"
            input-align="right"
            v-model="cardInfo.bankAccNo"
            type="number"
            clearable
            placeholder="请输入"
          >
          </van-field>
        </div>
      </div>
      <div class="li_cell" v-if="infoReg.hasOwnProperty('firBankMobile')">
        <div class="cell_label">预留手机号</div>
        <div class="cell_value">
          <van-field
            class="refphone"
            v-if="infoReg.hasOwnProperty('firBankMobile')"
            input-align="right"
            v-model="cardInfo.firBankMobile"
            type="number"
            maxlength="11"
            clearable
            placeholder="请输入"
          >
          </van-field>
        </div>
      </div>
      <div class="li_cell" v-if="limitMoney">
        <div class="cell_label">单笔限额</div>
        <div class="cell_value">{{ limitMoney }}</div>
      </div>
      <div class="li_cell" v-if="infoReg.hasOwnProperty('bankArea')">
        <div class="cell_label">开户行所在地</div>
        <div class="cell_value">
          <van-field
            class="refbankArea"
            @click="showPopAction('address', 'bankArea', [])"
            :value="cardInfo.bankArea"
            readonly
            rows="1"
            autosize
            type="textarea"
            placeholder="请选择"
            input-align="right"
            error-message-align="right"
          >
            <span class="ms-row-icon" slot="right-icon"></span>
          </van-field>
        </div>
      </div>
    </div>
    <ReadAuthorization
      @changeRadio="(v) => (radioCheck = v)"
      v-if="showSignFile"
    />
    <FooterBtns btnNum="1" rightText="提交验证" @saveForm="submit"></FooterBtns>
    <!-- 对话框 -->
    <BankLimitTable ref="bankLimitTableRef" />
    <van-popup v-model="showPop" round position="bottom" v-if="showPop">
      <Address
        v-if="popConfig.type == 'address'"
        filterCode=""
        @cancle="showPop = false"
        @addresssConfirm="addresssConfirm"
      />
      <!-- 银行卡限额选择 -->
      <RadioBankSelect
        :viewOptions="viewOptions"
        :payMode="cardInfo.payMode"
        :islimit="true"
        :bankCode="cardInfo.bankCode"
        @sureClick="showPop = false"
        @changeRadio="conformRadio"
        v-else-if="popConfig.type == 'radioPick'"
      />
    </van-popup>
  </div>
</template>

<script>
import BankLimitTable from "@/components/BankLimitTable";
import RadioBankSelect from "@/views/form/components/RadioBankSelect";
import ReadAuthorization from "./components/ReadAuthorization";
import { bankCardAlterMixin } from "./alter";
import { rebackUrlPath } from "@/methods/format.js";
export default {
  name: "BankcardReplacePage",
  data() {
    return {
      radioCheck: false,
      showPop: false,
      bankUrl: "",
      popConfig: {
        list: [],
      },
      keyWord: "",
      cardInfo: {
        bankAccName: "",
        payMode: "",
        bankCode: "",
        bankName: "",
        bankAccNo: "",
        firBankMobile: "",
        bankProvince: "",
        bankCity: "",
        bankCounty: "",
        bankArea: "",
        bankCardType: "",
      },
    };
  },
  components: { RadioBankSelect, BankLimitTable, ReadAuthorization },
  watch: {},
  mixins: [bankCardAlterMixin],
  created() {
    this.getBankCardImg();
  },
  mounted() {
    this.$nextTick(() => {
      Object.keys(this.orderInfo).map((key) => {
        if (this.cardInfo.hasOwnProperty(key) && this.orderInfo[key]) {
          this.cardInfo[key] = this.orderInfo[key];
        }
      });
    });
  },
  methods: {
    onConfirmPick(value) {
      if (this.popConfig.key == "bankCode") {
        this.changeCardData({
          bankCode: value.keyId,
          bankName: value.text,
        });
      }
      this.showPop = false;
    },
    changeMsRadio(type, item) {
      let obj = {};
      obj[type] = item.value;
      this.changeCardData(obj);
      if (type === "payMode") {
        // 判断已选择的银行是否在 对应的缴费方式中
        if (this.cardInfo.bankCode) {
          let target = this.bankList.find(
            (item) => item.keyId == this.cardInfo.bankCode
          );
          // 未找到对应的银行 置空
          if (!target) {
            this.cardInfo.bankName = "";
            this.cardInfo.bankCode = "";
            this.cardInfo.bankAccNo = "";
          }
        }
      }
    },
    conformRadio(value) {
      let resObj = {
        bankCode: value.keyId,
        bankName: value.text,
      };
      this.changeCardData(resObj);
    },
    getBankCardImg() {
      let params = {
        ...this.apiComParams,
        type: "31",
        imgType: "7",
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "queryImg",
          toast: true,
        })
        .then((data) => {
          const imgObj = data.img || {};
          this.bankUrl = imgObj.imgUrl || "";
        });
    },
    // 提交验证
    submit() {
      if (this.bankPhoto == "1" && this.bankUrl == "") {
        return this.$toast("请上传银行卡正面");
      }
      if (!this.cardInfo.bankAccNo) {
        this.$toast("请输入银行卡号");
        return false;
      }
      if (!this.cardInfo.bankCode) {
        this.$toast("请选择银行");
        return false;
      }
      if (this.showSignFile && !this.radioCheck) {
        this.$toast("请阅读并签名《银行自动转账授权书》");
        return false;
      }
      this.changBankAction();
    },
    changBankAction() {
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: {
            ...this.apiComParams,
            cont: this.cardInfo,
          },
          apiName: "modifyBankInfo",
          toast: true,
        })
        .then((data) => {
          this.$baseAlert("银行卡更换成功", () => {
            // 替换信息
            this.changeData(this.cardInfo);
            this.saveImgInfo();
          });
        });
    },
    /**保存图片 */
    saveImgInfo() {
      let params = {
        ...this.apiComParams,
        type: "31",
        imgType: "7",
        idNum: "",
        imgUrl: this.bankUrl,
        ocrFlag: "",
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "saveImg",
        })
        .then((res) => {
          // 百年,更换银行卡授权签名
          if (this.compEngName == "bainian") {
            this.cardAuthSign();
          } else {
            this.$backRouter();
          }
        });
    },
    cardAuthSign() {
      let params = {
        ...this.apiComParams,
        imgType: `1`, //0投被保人签字类型 1投保人签字类型 2被保人签字类型,3代理人
        fileType: "7", //0 投保确认书 8重庆问卷 13回执链接 7银行变更授权书地址 2.免除保险人责任条款说明 15.承保前撤单签名，10可回溯情况销售人员告知书签名
        isShare: "0", //是否分享，0不分享，1分享
        successUrl: `${rebackUrlPath("#/pay")}`,
        failUrl: `${rebackUrlPath("#/replace")}`,
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "getSignLink",
          toast: true,
        })
        .then((data) => {
          if (data.code == "1") {
            window.location.href = data.url;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.replace_page {
  padding: 10px 12px 100px;

  .mode1 {
    padding: 0 12px 20px 12px;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;

    .mode1_cell1 {
      // height: 40px;
      padding-top: 14px;
      padding-bottom: 6px;

      .mode1_tt {
        font-size: 15px;
        font-weight: 600;
        color: #343434;
      }

      .mode1_desc {
        font-size: 14px;
        font-weight: 500;
        color: #343434;
      }
    }

    .mode1_cell2 {
      padding: 8px 10px;
      border-radius: 4px;
      background: #fdfaf3;

      .bank_num {
        color: #242424;
      }

      .mode1_desc2 {
        display: flex;
        .tip_icon {
          width: 16px;
          margin-right: 2px;
          padding-top: 2px;
        }
      }
    }
  }

  .mode2 {
    padding: 10px;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    margin-top: 10px;
  }
}

.uploadCell {
  margin-top: 10px;

  .content-img-far {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 100px;
    background: #f4f8fe;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    padding: 10px;

    .content-img {
      height: 100%;
    }
  }

  .tips {
    height: 34px;
    background: #6699ff;
    border-radius: 0px 0px 10px 10px;
    text-align: center;
    line-height: 34px;
    color: #fff;
    font-size: 12px;
  }
}

.bank_exw {
  width: 93px;
}

.cell_label {
  width: 90px;
}
.cell_value {
  width: calc(100% - 100px);
}

.ms_radios {
  &-item {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.mode2 {
  /deep/.van-cell {
    padding: 0;
    padding-right: 0;
  }
}
</style>
